<template>
  <div class="k1">
    <!-- <h3><dv-decoration-7>各班男女人数</dv-decoration-7></h3> -->
    <dv-border-box-10 :color="['#50649a', '#50649b']">
      <div ref="myChart5" id="sexDiv1"></div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from "echarts";
import pubsub from "pubsub-js";
import { zhuti } from "../assets/index.js";
export default {
  data() {
    return {
      // 男生的数量
      manshu: [],
      // 女生的数量
      womenshu: [],
      //总人数之前说的固定的50要是改成30了就把这里改一下就行
      maxshu: 30,
      majorInfo: [], //订阅的消息
    };
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/majorratio/num/${this.majorInfo.year}/${this.majorInfo.college}/${this.majorInfo.major}`
        ),
        method: "get",
      }).then((response) => {
        this.manshu = response.data.data[0];
        this.womenshu = response.data.data[1];

        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      let myChart5 = echarts.init(this.$refs.myChart5, zhuti);
      //const man = `path://M516.608 217.6c40.448 0 72.704-32.768 72.704-72.704 0-40.448-32.768-72.704-72.704-72.704-40.448 0-72.704 32.768-72.704 72.704s32.256 72.704 72.704 72.704z m80.384 18.432H435.712c-51.2 0-93.696 41.472-93.696 93.184v225.28c0 17.408 13.824 31.744 31.232 31.744s31.744-14.336 31.744-31.744V351.744h16.384v565.76c0 23.552 18.944 42.496 43.008 42.496 23.552 0 42.496-18.944 42.496-42.496V588.8h17.408v328.192c0 23.552 18.944 42.496 42.496 42.496 23.552 0 43.008-18.944 43.008-42.496V351.744h16.384v203.264c0 17.408 14.336 31.744 31.744 31.744 17.408 0 31.232-14.336 31.232-31.744v-225.28c1.024-51.712-40.96-93.696-92.16-93.696z`;

      // const woman = `path://M693.064905 504.590142l-55.845778-202.954549c-7.532724-22.967796-34.488553-63.372358-79.685923-65.239925h-89.777337c-46.750604 1.927976-73.520086 41.894316-80.000256 65.365863l-55.777177 202.707792c-11.954885 44.266658 39.220951 61.57032 51.857744 19.985218l49.867311-187.020846h14.008799l-85.85176 328.529989h80.247012v246.909946c0 44.697714 60.764522 44.697714 60.764522 0v-246.909946h18.924473v246.909946c0 44.697714 58.766922 44.697714 58.766922 0v-246.909946h82.427888l-87.654823-328.529989h15.938823l49.988129 187.020846c12.331675 42.517862 63.256659 24.280417 51.801431-19.864399zM512.336858 219.833299c38.471467 0 69.538196-32.435663 69.538196-72.527941 0-40.031868-31.066729-72.528965-69.538196-72.528965-38.415154 0-69.48393 32.497096-69.48393 72.528965 0 40.030845 31.0698 72.527941 69.48393 72.527941z`;
      const spirit = `path://M516.608 217.6c40.448 0 72.704-32.768 72.704-72.704 0-40.448-32.768-72.704-72.704-72.704-40.448 0-72.704 32.768-72.704 72.704s32.256 72.704 72.704 72.704z m80.384 18.432H435.712c-51.2 0-93.696 41.472-93.696 93.184v225.28c0 17.408 13.824 31.744 31.232 31.744s31.744-14.336 31.744-31.744V351.744h16.384v565.76c0 23.552 18.944 42.496 43.008 42.496 23.552 0 42.496-18.944 42.496-42.496V588.8h17.408v328.192c0 23.552 18.944 42.496 42.496 42.496 23.552 0 43.008-18.944 43.008-42.496V351.744h16.384v203.264c0 17.408 14.336 31.744 31.744 31.744 17.408 0 31.232-14.336 31.232-31.744v-225.28c1.024-51.712-40.96-93.696-92.16-93.696z`;
      const spirit1 = `path://M693.064905 504.590142l-55.845778-202.954549c-7.532724-22.967796-34.488553-63.372358-79.685923-65.239925h-89.777337c-46.750604 1.927976-73.520086 41.894316-80.000256 65.365863l-55.777177 202.707792c-11.954885 44.266658 39.220951 61.57032 51.857744 19.985218l49.867311-187.020846h14.008799l-85.85176 328.529989h80.247012v246.909946c0 44.697714 60.764522 44.697714 60.764522 0v-246.909946h18.924473v246.909946c0 44.697714 58.766922 44.697714 58.766922 0v-246.909946h82.427888l-87.654823-328.529989h15.938823l49.988129 187.020846c12.331675 42.517862 63.256659 24.280417 51.801431-19.864399zM512.336858 219.833299c38.471467 0 69.538196-32.435663 69.538196-72.527941 0-40.031868-31.066729-72.528965-69.538196-72.528965-38.415154 0-69.48393 32.497096-69.48393 72.528965 0 40.030845 31.0698 72.527941 69.48393 72.527941z`;
      var maxData = this.maxshu;
      const option4 = {
        // title: {
        //   text: "各班级男女比例",
        //   // position: center,
        //   left: "30%",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var result = "";

            for (var i = 0; i < params.length / 2; i++) {
              // 修改这里，只循环一半的长度
              var maleCount = params[i].data;
              var femaleCount = 50 - maleCount;

              result +=
                params[i].name +
                "<br/>" +
                "男生人数：" +
                maleCount +
                "<br/>" +
                "女生人数：" +
                femaleCount +
                "<br/>";
            }

            return result;
          },
        },
        xAxis: {
          max: maxData,
          splitLine: { show: false },
          axisLine: { show: false },
          offset: 10,
          // axisLine: {
          //   lineStyle: {
          //     color: "red",
          //   },
          // },
          axisLabel: {
            margin: 10,
          },
        },
        yAxis: {
          data: ["一班", "二班", "三班"],
          inverse: true,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#999",
            fontSize: 15,
          },
        },
        grid: {
          top: "center",
          height: 130,
          left: 70,
          right: 90,
          bottom: 20,
        },
        series: [
          // 男生图标控制
          {
            // current data
            type: "pictorialBar",
            symbol: spirit,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 25,
            symbolBoundingData: maxData,
            data: this.manshu,
            z: 10,
          },

          // 女生的图标控制
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              opacity: 0.4,
            },
            label: {
              show: true,
              formatter: function (params) {
                return ((params.value / maxData) * 100).toFixed(1) + " %";
              },
              position: "right",
              offset: [10, 0],
              color: "#3C404C",
              fontSize: 15,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit1,
            symbolSize: 25,
            symbolBoundingData: maxData,
            data: this.womenshu,
            z: 5,
          },
        ],
      };
      myChart5.setOption(option4);
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用

        myChart5.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.pubId = pubsub.subscribe("selectMajorInfo", (msgName, data) => {
      // console.log("班级男女比例", data);
      this.majorInfo = data;
      this.getInfo();
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k1 {
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top:15px ;
}
h3 {
  font-size: 18px;
  width: 100%;
  height: 100%;
  line-height: 100%;
  flex: 1;
  color: aqua;
  margin-bottom: 10px;
  /* padding-left: 25px; */
  /* background-image: url("@/assets/title.png");
  background-repeat: no-repeat;
  background-size: contain; */
}
#sexDiv1 {
  flex: 9;
  padding: 10px;
  width: 100%;
  height: 100%;
  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
</style>
